<template>
	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer"
		@touchmove.stop.prevent="clear">
		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }"
			@click="close('mask')" />
		<view class="uni-drawer__content"
			:class="{ 'uni-drawer--right': rightMode, 'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer }"
			:style="{ width: drawerWidth + 'px' }">
			<slot />
		</view>
		<!-- #ifdef H5 -->
		<keypress @esc="close('mask')" />
		<!-- #endif -->
	</view>
</template>

<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
 * Drawer 抽屉
 * @description 抽屉侧滑菜单
 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
 * @property {Boolean} mask = [true | false] 是否显示遮罩
 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
 * @property {Boolean} mode = [left | right] Drawer 滑出位置
 * 	@value left 从左侧滑出
 * 	@value right 从右侧侧滑出
 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
 * @event {Function} close 组件关闭时触发事件
 */
export default {
	name: 'UniDrawer',
	components: {
		// #ifdef H5
		keypress
		// #endif
	},
	emits: ['change'],
	props: {
		/**
		 * 显示模式（左、右），只在初始化生效
		 */
		mode: {
			type: String,
			default: ''
		},
		/**
		 * 蒙层显示状态
		 */
		mask: {
			type: Boolean,
			default: true
		},
		/**
		 * 遮罩是否可点击关闭
		 */
		maskClick: {
			type: Boolean,
			default: true
		},
		/**
		 * 抽屉宽度
		 */
		width: {
			type: Number,
			default: 220
		}
	},
	data() {
		return {
			visibleSync: false,
			showDrawer: false,
			rightMode: false,
			watchTimer: null,
			drawerWidth: 220
		}
	},
	created() {
		// #ifndef APP-NVUE
		this.drawerWidth = this.width
		// #endif
		this.rightMode = this.mode === 'right'
	},
	methods: {
		clear() { },
		close(type) {
			// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
			if ((type === 'mask' && !this.maskClick) || !this.visibleSync) return
			this._change('showDrawer', 'visibleSync', false)
		},
		open() {
			// fixed by mehaotian 处理重复点击打开的事件
			if (this.visibleSync) return
			this._change('visibleSync', 'showDrawer', true)
		},
		_change(param1, param2, status) {
			this[param1] = status
			if (this.watchTimer) {
				clearTimeout(this.watchTimer)
			}
			this.watchTimer = setTimeout(() => {
				this[param2] = status
				this.$emit('change', status)
			}, status ? 50 : 300)
		}
	}
}
</script>

<style lang="scss" >
$uni-mask: rgba($color: #000000, $alpha: 0.4);
// 抽屉宽度
$drawer-width: 220px;

.uni-drawer {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 999;
}

.uni-drawer__content {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	position: absolute;
	top: 0;
	width: $drawer-width;
	bottom: 0;
	background-color: $uni-bg-color;
	transition: transform 0.3s ease;
}

.uni-drawer--left {
	left: 0;
	/* #ifdef APP-NVUE */
	transform: translateX(-$drawer-width);
	/* #endif */
	/* #ifndef APP-NVUE */
	transform: translateX(-100%);
	/* #endif */
}

.uni-drawer--right {
	right: 0;
	/* #ifdef APP-NVUE */
	transform: translateX($drawer-width);
	/* #endif */
	/* #ifndef APP-NVUE */
	transform: translateX(100%);
	/* #endif */
}

.uni-drawer__content--visible {
	transform: translateX(0px);
}


.uni-drawer__mask {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: $uni-mask;
	transition: opacity 0.3s;
}

.uni-drawer__mask--visible {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	opacity: 1;
}</style>
